<template>
    <button class="a-input-switch" :disabled="formItemHook.myDisabled" :class="[
        `color-${formItemHook.myColor}`,
        `size-${formItemHook.mySize}`,
        { disabled: formItemHook.myDisabled },
        props.value ? 'true' : 'false',
    ]" @click="methods.input(!props.value)">
        <span class="flag c-circle"></span>
    </button>
</template>

<style lang="scss" scoped>
@use "sass:math";
@import "../scss/vars";

.a-input-switch {
    cursor: pointer;
    border: none;
    outline: none;
    text-align: left;
    transition-property: padding-left, background-color;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;

    &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .flag {
        background-color: #fff;
    }

    @each $colorPackageName, $colorPackageValue in $colorPackages {
        $frontColor: map-get($colorPackageValue, "frontColor");
        $bgColor: map-get($colorPackageValue, "bgColor");

        &.color-#{$colorPackageName} {
            &.true {
                background-color: $bgColor;
            }

            &.false {
                background-color: lighten(grayscale($bgColor), 10%);
            }
        }
    }

    @each $sizePackageName, $sizePackageValue in $sizePackages {
        $size: map-get($sizePackageValue, "size") * 0.75;
        $basePadding: round(math.div($size, 20));

        &.size-#{$sizePackageName} {
            padding-top: $basePadding;
            width: $size * 2;
            height: $size;
            border-radius: math.div($size, 2);

            &.false {
                padding-left: $basePadding;
            }

            &.true {
                padding-left: $size + $basePadding;
            }

            .flag {
                width: $size - $basePadding * 2;
                height: $size - $basePadding * 2;
            }
        }
    }

    .flag {
        display: inline-block;
    }
}
</style>

<script setup lang="ts">
import { useFormItem } from '@/hooks/useFormItem'
import { useInput } from '@/hooks/useInput'
import { InputPropsType } from '@/types'

interface PropsType extends InputPropsType<boolean | undefined, never> {
}
const props = withDefaults(defineProps<PropsType>(), {
    value: undefined,
    color: undefined,
    disabled: undefined,
    size: undefined,
    sharp: undefined,
    rules: () => [],
    isInner: false,
})

const emit = defineEmits<{
    (e: 'update:value', value?: boolean): void
}>()

useInput(props)
const formItemHook = useFormItem(props)

const methods = {
    input(val?: boolean) {
        emit('update:value', val)
    }
}
</script>